<template>
  <div class="pdf-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="html-data">
          <div id="report" v-html="htmlData"></div>
          <div class="btn-group">
            <el-button class="download-btn" type="primary" size="mini" @click="toPDF">转换PDF</el-button>
            <el-button class="download-btn" type="primary" size="mini" @click="downloadPDF">下载PDF</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <pdf-view :PDFSrc="pdfSrc" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js'
import PdfView from '@/components/pdfView/PdfView.vue';

export default {
  components: {
    PdfView
  },
  data() {
    return {
      pdfSrc: "http://localhost:55500/SPF2024112100005.pdf",
      htmlData: ''
    }
  },
  mounted() {
    console.log(this.$route)
    console.log(this.$router)
    this.ReadHtml();
  },
  methods: {
    ReadHtml() {
      let file = "/data/Contract2.html";
      fetch(file)
        .then(response => response.text())  // 将响应内容作为文本返回
        .then(data => {
          // console.log(data); // 打印文件内容
          this.htmlData = data;
        })
        .catch(error => {
          console.error('Error reading the file:', error);
        });
    },

    downloadPDF() {
      const element = document.getElementById('report'); // 获取报告的DOM元素

      // 设置打印选项
      const options = {
        margin: [10, 10, 10, 10], // 内边距
        filename: '合同.pdf', // pdf文件名字
        image: { type: 'jpeg', quality: 0.98 }, // 生成图片的类型以及清晰度
        pagebreak: { mode: 'avoid-all', before: '#page2el' }, // 处理是否元素分割
        //元素分割：就是分页的时候，会将图表、文字等元素分割成俩块，这里avoid-all是所有元素都不被分割
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      }

      // 生成PDF
      html2pdf()
        .from(element)
        .set(options)
        .output('blob') // 将输出设置为Blob
        .then((blob) => {
          // 创建一个链接元素
          console.log('blob :>> ', blob)
          const url = URL.createObjectURL(blob)

          let a = document.createElement('a');
          a.href = url;
          a.download = '合同.pdf';
          a.click();

          URL.revokeObjectURL(url);
          document.removeChild(a);
        })
    },
    async toPDF() {
      let formData = new FormData();
      let base64data = this.$tools.Base64Encoding(this.htmlData);
      formData.append('contractData', base64data)
      const res = await this.$http.post('/api/Tools/HtmlToPDF', formData);
      console.log(res);
      if(res.status == 200){
        this.$message.success(res.data);
      }
      
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-container {
  height: calc(100vh - 70px);
  background: #f5f5f5;
  overflow: hidden;

  .html-data {
    position: relative;
    width: 96%;
    height: calc(100vh - 70px);
    overflow-x: hidden;
    overflow-y: scroll;
    // padding: 20px 30px;
    background: white;

    .btn-group {
      position: absolute;
      top: 35px;
      width: 90%;
      .download-btn {
        float: right;
        margin: 5px;
      }
    }
  }
}
</style>